<template>
  <clue-list :curdProps="baseProps" :tabProps="tabProps" :listTitle="listTitle" :query="query"></clue-list>
</template>

<script>
  import clueClueList from '../../base/mixin/clue-clue-list'
  import ClueList from '../../components/clue-list.vue'
  import {mapState} from 'vuex'

  export default {
    mixins: [clueClueList],
    components: {
      ClueList
    },
    data() {
      return {
        pageType: this.$router.currentRoute.query.type,
        listTitle: null,
        baseProps: {
          mixin: clueClueList,
          name: 'clueClueList',
          modelDey: 'pkValue',
          handleType: 'icon',
          addable: false,
          editable: false,
          removable: false
        }
      }
    },
    watch: {
      $route(route) {
        this.pageType = route.query.type
        this.setListTitle()
      }
    },
    created() {
      this.$nextTick(() => {
        this.setListTitle()
      })
    },
    computed: {
      ...mapState({
        userMenus: state => state.menus.userMenus || []
      }),
      query() {
        return {ltId: 1, nodekey: this.pageType, keyword: ''}
      },
      tabProps() {
        return {
          type: this.pageType
        }
      }
    },
    methods: {
      setListTitle() {
        if (this.userMenus.menus.length > 0) {
          const currMenu = this.userMenus.menus.find(item => {
            return item.name === this.$router.currentRoute.name
          })

          if (currMenu) {
            const currSubMenu = currMenu.children.find(item => {
              return item.path.indexOf(this.pageType) > -1
            })
            this.listTitle = currSubMenu.name
          }
        }
      }
    }
  }
</script>
